<template>
  <div>
    <div style="display: flex;margin:0 0 10px 8px ">
      <el-upload style="margin-right: 10px" :show-file-list="false" :before-upload="beforeUpload"
        :on-success="onSuccess" :on-error="onError" :disabled="importDataDisabled" :headers="header"
        :action="this.$baseUrl + '/gmu/tbl-units/importUnits/'">
        <el-button size="small" icon="el-icon-download" type="success" :disabled="importDataDisabled">
          导入数据
        </el-button>
      </el-upload>
      <!-- <el-button size="small" icon="el-icon-download" type="success">-->
      <!--        导出数据-->
      <!--      </el-button> -->
    </div>
    <el-table class="el-table__scroll" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="unitsId"
      border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <!-- <el-table-column type="selection" width="45" fixed align="center"></el-table-column> -->
      <el-table-column prop="name" label="单位" width="580">
      </el-table-column>
      <el-table-column prop="unitsPeoples" label="预约人数" width="180" align="center">
      </el-table-column>
      <el-table-column prop="icon" label="操作" width="450" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showDetail(scope.row)">
            详情
          </el-button>
          <el-button type="success" size="mini" @click="showDialogForm(scope.row)">
            添加下一级
          </el-button>
          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="remove(scope.row.unitsId)">
              <el-button type="danger" slot="reference" size="mini" style="margin-left:12px;">删除
              </el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog title="添加下一级" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="单位名称" label-width="120px">
            <el-input style="width: 70%" size="small" v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择角色" label-width="120px">
            <el-select size="small" v-model="form.roleId" placeholder="请选择活动区域">
              <el-option size="small" v-for="item in optionRoleData" :key="item.roleId" :label="item.nameCn"
                :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否为采样方" label-width="120px">
            <el-radio v-model="form.sampleStatus" label="0">否</el-radio>
            <el-radio v-model="form.sampleStatus" label="1">是</el-radio>
          </el-form-item>
          <el-form-item label="人数" label-width="120px">
            <el-input style="width: 70%" size="small" v-model="form.unitsPeoples" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button type="primary" @click="addUnits">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="详情信息" :visible.sync="dialogFormVisible2">
        <el-form :model="unitsData">
          <el-form-item label="单位名称" label-width="120px">
            <el-input :readonly="onlyRead" style="width: 70%" size="small" v-model="unitsData.name" autocomplete="off">
            </el-input>
          </el-form-item>
          <el-form-item label="角色" label-width="120px" v-if="unitsData.roleId !== 0">
            <el-select :disabled="onlyRead" size="small" v-model="unitsData.roleId" placeholder="请选择活动区域">
              <el-option size="small" v-for="item in optionRoleData" :key="item.roleId" :label="item.nameCn"
                :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否为采样方" label-width="120px">
            <el-radio :disabled="onlyRead" v-model="unitsData.sampleStatus" label="0">否</el-radio>
            <el-radio :disabled="onlyRead" v-model="unitsData.sampleStatus" label="1">是</el-radio>
          </el-form-item>
          <el-form-item label="人数" label-width="120px">
            <el-input :readonly="onlyRead" style="width: 70%" size="small" v-model="unitsData.unitsPeoples"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" type="success" @click="onlyRead = false">编辑</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
          <el-button size="small" :disabled="onlyRead" type="primary" @click="updateUnits">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      header: {
        token: localStorage.getItem("token")
      },
      importDataDisabled: false,
      tableData: [],
      beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: '',
        parentId: '',
        roleId: '',
        sampleStatus: '',
        unitsPeoples: ''
      },
      optionRoleData: [],
      unitsData: {
        unitsId: '',
        name: '',
        parentId: '',
        roleId: '',
        sampleStatus: '',
        unitsPeoples: ''
      },
      onlyRead: true
    }
  },
  created() {
    this.getAllunits()
  },
  methods: {
    onSuccess() {
      this.importDataText = '导入数据';
      this.importDataIcon = 'el-icon-upload2';
      this.getAllunits();
      this.importDataDisabled = false;
    },
    onError() {
      this.importDataText = '导入数据';
      this.importDataIcon = 'el-icon-upload2';
      this.importDataDisabled = false;
    },
    beforeUpload() {
      this.importDataText = '正在导入';
      this.importDataIcon = 'el-icon-loading';
      this.importDataDisabled = true;
    },
    updateUnits() {
      console.log(this.unitsData)
      this.$axios.put("/gmu/tbl-units/updateUnits", this.unitsData).then(res => {
        if (res.data.code === 200) {
          this.dialogFormVisible2 = false;
          this.getAllunits();
          this.onlyRead = true;
        }
      })
    },
    cancelAdd() {
      this.dialogFormVisible = false;
      this.form = {
        name: '',
        parentId: '',
        roleId: '',
        sampleStatus: '',
        unitsPeoples: ''
      }
    },
    cancel() {
      this.dialogFormVisible2 = false;
      this.onlyRead = true;
    },
    showDetail(data) {
      Object.assign(this.unitsData, data);//使用拷贝，因为updatePos=data是同步的，在取消修改后表格中的值也会改变
      this.unitsData.sampleStatus = this.unitsData.sampleStatus + '';
      this.dialogFormVisible2 = true;
      this.getRoleArea();
    },
    addUnits() {
      this.form.parentId = this.unitsData.unitsId;
      this.$axios.post("/gmu/tbl-units/addUnits", this.form).then(res => {
        if (res.data.code === 200) {
          this.dialogFormVisible = false;
          this.getAllunits();
          this.unitsData = {
            unitsId: '',
            name: '',
            parentId: '',
            roleId: '',
            sampleStatus: '',
            unitsPeoples: ''
          };
        }
        this.form = {}
      })
    },
    //获取所有相关单位
    getAllunits() {
      this.$axios.get("/gmu/tbl-units/getAllUnits/" + this.beSampleUnitsId).then(res => {
        this.tableData = res.data.data
      })
    },
    showDialogForm(data) {
      this.dialogFormVisible = true;
      this.unitsData = data;
      this.getRoleArea();
    },
    getRoleArea() {
      this.$axios.get("/gmu/tbl-role/getAllRole").then(res => {
        if (res.data.code === 200) {
          this.optionRoleData = res.data.data;
          this.optionRoleData.push({
            nameCn: '无',
            roleId: 0
          })
        }
      })
    },
    remove(unitsId) {
      this.$axios.delete("/gmu/tbl-units/deleteUnits/" + unitsId).then(res => {
        if (res.data.code === 200) {
          this.getAllunits();
        }
      })
    },
  }
}
</script>

<style>
</style>
